<template>
  <div :class="['todo-item',info.completed?'completed':''] ">
    <input type="checkbox" v-model="info.completed">
    <label>{{info.text}}</label>
    <button class="btn" @click="delItem"></button>
  </div>
</template>
<script>
  export default {
    name: "TodoItem",
    props: {
      info: Object,
    },
    methods: {
      delItem() {
        this.$emit("del", this.info.id);
      },
    },
  };
</script>
<style lang="stylus" scoped>
  @import '~styles/theme.styl'
  @import '~styles/mixins.styl'

  .todo-item
    display flex
    justify-content space-between
    font-size 24px
    border-top 1px soild rgba(0, 0, 0, 0.1)
    padding-top 10px

    &:hover
      button
        display block

    &.completed
      label
        color #d9d9d9
        text-decoration line-through

  input
    text-align center
    width 50px
    height 30px
    cleanDefaultStyle()

    &:after
      content url('~images/unChecked.svg')

    &:checked:after
      content url('~images/checked.svg')

  label
    flex 1
    transition color 0.6s

  button
    width 40px
    height 30px
    cleanDefaultStyle()
    background-color transparent
    display none

    &:after
      content 'X'
      font-size 24px
      color $lightred
</style>

